<!DOCTYPE html>
<script>
  class SafariBug extends HTMLElement {
    constructor() {
      super();
      //this.shadow = this.attachShadow({ mode: 'closed' });

      this.count = 0;
    }

    connectedCallback() {
      this.render();
    }

    render() {
      this.innerHTML = `
        <style>
          :host {
            margin: 16px;
          }
        </style>
        <p>I am a bug ${this.count}</p>
      `;
    }
  }

  class SafariBugII extends HTMLElement {
    constructor() {
      super();
      //this.shadow = this.attachShadow({ mode: 'closed' });
    }

    connectedCallback() {
      this.render();
    }

    update() {
      const other = this.getRootNode().querySelector('safari-bug');
      other.count++;
      other.render();
    }


    render() {
      this.innerHTML = `
        <button onclick="this.closest('safari-bugii').update()">Show me the bug! 🐜</button>
      `;
    }
  }

  class SafariBugIII extends HTMLElement {
    constructor() {
      super();
      //this.shadow = this.attachShadow({ mode: 'closed' });
    }

    connectedCallback() {
      this.render();
    }

    render() {
      this.innerHTML = `
        <h1>Cute non-Bug 🐜</h1>
        <safari-bug></safari-bug>
        <safari-bugii></safari-bugii>
      `;
    }
  }

  customElements.define('safari-bug', SafariBug);
  customElements.define('safari-bugii', SafariBugII);
  customElements.define('safari-bugiii', SafariBugIII);
</script>
<safari-bugiii></safari-bugiii>
<hr style="margin: 32px 2px">
<details>
  <summary>What's going on here?</summary>
  <p>Without using Shadow DOM, this bug does not occur.</p>
  <p>There is no code to add the increasing margin that you (do not) see. It simply (does not) occurs.</p>
  <dl>
    <dt>What's required to summon this bug?</dt>
    <dd>
      <ul>
        <li>Shadow DOM (demonstrated here by absence disabling the bug)</li>
        <li>The custom elements</li>
        <li><pre>&lt;!DOCTYPE html></pre></li>
        <li><pre>:host { margin: XXXpx; }</pre> I checked values including 0.1px, 1px, 84px, 999px and all reproduced the bug. 0px did not as did removing this rule.</li>
      </ul>
      <p>If you remove any of these, the bug refuses to be conjured.</p>
    </dd>
    <dt>What version of Safari was this discovered in?</dt>
    <dd>
      I've only checked with Version 17.1 (18616.2.9.11.9, 18616) on Ventura and 
      Safari on iOS 16.7.2 (20H115). They both reproduce the bug.
    </dd>
  </dl>
</details>
